<template>
  <view
    class="wrapper"
    :style="
      $store.state.userId && $store.state.userId == this.infoDetial.userId
        ? 'padding-bottom: 20upx;'
        : ''
    "
  >
    <view class="header">
      <view class="navber">
        <view class="navber__left" @click="leftClick(urlIndex)">
          <view class="iconfont icon-jiantou-zuo arrow-icon"></view>
        </view>
      </view>
      <view>
        <u-swiper
          :list="infoDetial.informationImages"
          @change="(e) => (currentNum = e.current)"
          @click="showPreview(infoDetial.informationImages[currentNum])"
          :autoplay="false"
          keyName="imageUrl"
          indicatorStyle="right: 20px"
          height="750rpx"
        >
          <view slot="indicator" class="indicator-num">
            <text class="indicator-num__text"
              ><text style="color: #ffffff">{{
                infoDetial.informationImages.length ? currentNum + 1 : 0
              }}</text
              >/{{ infoDetial.informationImages.length || 0 }}</text
            >
          </view>
        </u-swiper>
      </view>
    </view>
    <view class="container">
      <view class="container-title omit">{{ infoDetial.title }}</view>
      <view class="container-bottom">
        <view class="price"
          >{{ getCoinName(infoDetial.currencyId) }}{{ infoDetial.price }}</view
        >
        <view class="weizhi-view">
          <view class="iconfont icon-weizhi-1 weizhi"></view>
          <view class="center omit">{{ infoDetial.place }}</view>
        </view>
      </view>
    </view>
    <view class="white-box">
      <view class="describe-title">{{ $t("information.Description") }}</view>
      <view class="describe-content">{{ infoDetial.description }}</view>
    </view>
    <view class="white-box">
      <view class="category-box">
        {{ $t("information.Category") }}
        <view class="right omit">{{ infoDetial.categoryName }}</view>
      </view>
    </view>
    <view class="white-box" style="padding: 30rpx">
      <view class="people-box">
        <view class="pic-box">
          <image
            :src="
              infoDetial.avatarCompress ||
              infoDetial.avatar ||
              $store.state.normalPic
            "
            class="pic"
            mode="aspectFill"
          ></image>
        </view>
        <view class="right-box">
          <view class="name omit">{{ infoDetial.userName }}</view>
          <view class="lastTime" v-if="infoDetial.lastTime">{{ time() }}</view>
        </view>
      </view>
    </view>
    <view
      class="bottom"
      v-if="
        !($store.state.userId && $store.state.userId == this.infoDetial.userId)
      "
    >
      <!-- <view class="bottom__btn_1" @click="getCustomer(8, option)">{{ $t("information.SecureTransaction") }}</view> -->
      <view class="bottom__btn_2" @click="handleCreat(option)"
        >{{ $t("information.Immediatecommunication") }}
      </view>
    </view>
  </view>
</template>

<script>
import { getCurrencyList } from "@/services/bourse.js";
import { queryInfoDetail } from "@/services/information.js";
import { mapActions, mapState } from "vuex";
import { formatTime } from "@/utils/formatTime";
import { getTimeDiff } from "@/utils/index";
import { queryCreateModuleGroup, queryGroupDetail } from "@/services/group.js";
export default {
  data() {
    return {
      id: "",
      urlIndex: "InfoDetail",
      language: "",
      infoDetial: {
        informationImages: [],
      },
      currentNum: 0,
      currencyList: [],
      option: {},
    };
  },
  computed: {
    ...mapState(["userInfo", "token"]),
  },
  methods: {
    ...mapActions(["changeGroupList"]),
    async handleCreat(selected) {
      if (!this.token) {
        uni.navigateTo({
          url: "/pages/login/Login",
        });
        return;
      }
      uni.showLoading();
      const { result } = await queryCreateModuleGroup({
        groupName: this.infoDetial.userName,
        avatar:
          this.infoDetial.avatar ||
          this.infoDetial.avatarCompress ||
          this.$store.state.normalPic,
        avatarCompress:
          this.infoDetial.avatarCompress ||
          this.infoDetial.avatar ||
          this.$store.state.normalPic,
        memberIds: [this.infoDetial.userId],
        moduleType: 5,
      });
      uni.showLoading();
      if (result.code === 200) {
        var group = await this.$RongIMLib.getConversation({
          targetId: result.data,
          conversationType: 3,
        });
        const resp = await queryGroupDetail(result.data);
        uni.showLoading();
        if (resp.success) {
          resp.result.data.myName = resp.result.data.jyRemark || "OMLOOKER";
          // console.log(group, 'group')
          if (group) {
            group.data.info = resp.result.data;
            var groupList = this.$store.state.groupList;
            if (!this.$store.state.moduleGroupInfo[5]) {
              this.$store.state.moduleGroupInfo[5] = [
                {
                  groupId: result.data,
                  groupName: this.infoDetial.userName,
                  moduleType: 5,
                },
              ];
            } else {
              var index = this.$store.state.moduleGroupInfo[5].find(
                (o) => o.groupId == result.data
              );
              if (index == -1) {
                this.$store.state.moduleGroupInfo[5].push({
                  groupId: result.data,
                  groupName: this.infoDetial.userName,
                  moduleType: 5,
                });
              }
            }
            var gIndex = groupList.indexOf((o) => o.groupId == result.data);
            if (gIndex > -1) {
              groupList[gIndex] = group.data.info;
            } else {
              groupList.push(group.data.info);
            }
            await this.changeGroupList(groupList);
            console.log(this.$store.state.groupList);
            uni.hideLoading();

            uni.setStorageSync("needSelectCustomer", JSON.stringify(selected));
            //直接跳转页面
            uni.navigateTo({
              url:
                "/pages/chat/GroupChat?isFriendGroup=true&backType=1&isModule=true&groupId=" +
                result.data,
              fail(err) {
                console.log(err);
                uni.hideLoading();
              },
            });
          }
        }
      }
    },
    time() {
      return getTimeDiff(this.infoDetial.lastTime, "minutes", true);
    },
    //预览 暂时只有图片
    showPreview(obj) {
      console.log(obj);
      let url = obj.imageUrl;
      uni.previewImage({
        urls: [url],
      });
    },
    getLabelLangType(obj) {
      if (this.language === "zh-Hans") {
        return obj.cn;
      } else if (this.language === "en") {
        return obj.en;
      } else if (this.language === "ru") {
        return obj.ru;
      }
    },
    async getMainDetail() {
      const resp = await queryInfoDetail(this.id);
      if (resp.result.code === 200) {
        this.infoDetial = {
          ...resp.result.data,
          lastTime: resp.result.data.lastTime
            ? formatTime("yyyy/MM/dd hh:mm:ss", resp.result.data.lastTime)
            : null,
        };
        const place = resp.result.data.place;
        try {
          this.infoDetial.place = place
            ? this.getRegionNameList(JSON.parse(place)).join(",")
            : "";
        } catch {
          this.infoDetial.place = place;
        }
        const categoryName = resp.result.data.category;
        try {
          this.infoDetial.categoryName = categoryName
            ? this.getLabelLangType(JSON.parse(categoryName))
            : "";
        } catch {
          this.infoDetial.categoryName = categoryName;
        }
        this.option = {
          moduleType: 8,
          name: this.infoDetial.title,
          selectId: this.infoDetial.id,
          reason: "",
          img:
            this.infoDetial.informationImages &&
            this.infoDetial.informationImages.length > 0
              ? this.infoDetial.informationImages[0].imageUrlCompress
              : "",
        };
      }
    },
    async getCurrency() {
      const resp = await getCurrencyList();
      if (resp.result.code == 200) {
        this.currencyList = resp.result.data;
      }
    },
    getCoinName(currencyId) {
      const coinIndex = this.currencyList.findIndex(
        (value) => String(value.id) === String(currencyId)
      );
      return coinIndex !== -1 ? this.currencyList[coinIndex].symbol : "";
    },
  },
  onLoad(e) {
    this.language = uni.getLocale();
    this.getPrePages(this.urlIndex); // 获取上一个页面的路径已经参数
    if (e.id) {
      this.id = e.id;
      this.getCurrency();
      this.getMainDetail();
    }
  },
};
</script>

<style lang="scss" scoped>
.omit {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-all;
}

.wrapper {
  min-height: 100vh;
  padding-bottom: 164rpx;
  box-sizing: border-box;
}

.header {
  position: relative;

  .navber {
    z-index: 11;
    position: absolute;
    top: var(--status-bar-height);
    height: 44px;
    line-height: 44px;

    .arrow-icon {
      font-size: 36rpx;
      color: #ffffff;
      // color: rgba(0, 0, 0, 0.9);
      margin-left: 30rpx;
    }
  }
}

.indicator-num {
  padding: 0rpx 20rpx;
  height: 44rpx;
  line-height: 44rpx;
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 40rpx;
  @include flex;
  justify-content: center;
  margin-bottom: 100rpx;

  &__text {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
  }
}

.container {
  position: relative;
  z-index: 10;
  padding: 50rpx 40rpx;
  border-radius: 50rpx 50rpx 0px 0px;
  background-color: #ffffff;
  margin-top: -96rpx;

  .container-title {
    width: 100%;
    -webkit-line-clamp: 2 !important;
    line-clamp: 1 !important;
    font-size: 36rpx;
    font-weight: 500;
    color: #000000;
    line-height: 52rpx;
  }

  .container-bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;

    .price {
      font-size: 36rpx;
      font-weight: 500;
      color: #fe6600;
      line-height: 52rpx;
      margin-right: 24rpx;
    }

    .weizhi-view {
      display: flex;
      align-items: center;
      margin-left: auto;

      .weizhi {
        color: #878787;
        font-size: 32rpx;
      }

      .center {
        margin-left: 10upx;
        font-size: 26rpx;
        font-weight: 400;
        color: #878787;
      }
    }
  }
}

.white-box {
  width: 100%;
  height: fit-content;
  padding: 0rpx 40rpx;
  box-sizing: border-box;
  background: #ffffff;
  margin-top: 20rpx;

  .describe-title {
    width: 100%;
    padding: 40rpx 0rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #000000;
    line-height: 44rpx;
  }

  .describe-content {
    font-size: 26rpx;
    font-weight: 400;
    color: #000000;
    line-height: 40rpx;
    padding-bottom: 40rpx;
  }

  .category-box {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 26rpx;
    font-weight: 400;
    color: #878787;
    line-height: 40rpx;
    white-space: nowrap;

    .right {
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.8);
      margin-left: 24rpx;
    }
  }

  .people-box {
    width: 100%;
    display: flex;
    align-items: center;

    .pic-box {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 30upx;

      .pic {
        width: 100%;
        height: 100%;
      }
    }

    .right-box {
      flex: 1;

      .name {
        width: 100%;
        font-size: 28rpx;
        font-weight: 500;
        color: #000000;
        line-height: 40rpx;
      }

      .lastTime {
        font-size: 24rpx;
        font-weight: 400;
        color: #878787;
        line-height: 36rpx;
        margin-top: 10rpx;
      }
    }
  }
}

.bottom {
  width: 100%;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 3rpx 0rpx rgba(0, 0, 0, 0.15);
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 17rpx 30rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 17rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 17rpx);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .bottom__btn_1 {
    flex: 1;
    width: 330rpx;
    height: 90rpx;
    background: #ffffff;
    border: 2rpx solid #61bdb2;
    border-radius: 20rpx;
    box-sizing: border-box;
    text-align: center;
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #61bdb2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bottom__btn_2 {
    flex: 1;
    width: 330rpx;
    height: 90rpx;
    background: #61bdb2;
    border-radius: 20rpx;
    text-align: center;
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
